<script setup lang="ts">
import { ref, computed } from 'vue';

// 模拟传感器数据
const sensorData = ref({
  location: '地点一',
  temperature: 23, // 摄氏度
  humidity: 45, // 百分比
  pm25: 15, // μg/m³
  co2: 650 // ppm
});

// 根据温度提供建议
const temperatureAdvice = computed(() => {
  const temp = sensorData.value.temperature;
  if (temp < 16) return '室内温度偏低，请注意保暖，适当开启暖气设备。';
  if (temp > 28) return '室内温度偏高，请开启空调或风扇降温，避免中暑。';
  return '室内温度适宜，有利于身体健康。';
});

// 根据湿度提供建议
const humidityAdvice = computed(() => {
  const humidity = sensorData.value.humidity;
  if (humidity < 30) return '室内湿度偏低，可使用加湿器增加湿度，避免皮肤干燥和呼吸道不适。';
  if (humidity > 70) return '室内湿度偏高，请开启除湿设备或通风，防止霉菌滋生。';
  return '室内湿度适宜，有利于身体健康。';
});

// 根据PM2.5提供建议
const pm25Advice = computed(() => {
  const pm25 = sensorData.value.pm25;
  if (pm25 <= 35) return 'PM2.5指数良好，空气质量优，适合正常活动。';
  if (pm25 <= 75) return 'PM2.5指数中等，敏感人群应减少户外活动。';
  return 'PM2.5指数较高，建议关闭门窗，开启空气净化器，减少外出。';
});

// 根据二氧化碳浓度提供建议
const co2Advice = computed(() => {
  const co2 = sensorData.value.co2;
  if (co2 <= 800) return '二氧化碳浓度正常，空气新鲜。';
  if (co2 <= 1500) return '二氧化碳浓度略高，建议适当通风换气。';
  return '二氧化碳浓度过高，请立即开窗通风，避免头晕、注意力不集中等症状。';
});

// 综合环境建议
const environmentAdvice = computed(() => {
  return [
    temperatureAdvice.value,
    humidityAdvice.value,
    pm25Advice.value,
    co2Advice.value
  ];
});
</script>

<template>
  <div class="dashboard-container">
    <div class="location-header">
      <h2>{{ sensorData.location }}</h2>
    </div>

    <div class="environment-panel">
      <h3>居家环境</h3>
      <div class="sensor-grid">
        <!-- 温度卡片 -->
        <div class="sensor-card">
          <div class="sensor-title">室内温度</div>
          <div class="sensor-value">{{ sensorData.temperature }}°C</div>
        </div>

        <!-- 湿度卡片 -->
        <div class="sensor-card">
          <div class="sensor-title">室内湿度</div>
          <div class="sensor-value">{{ sensorData.humidity }}%</div>
        </div>

        <!-- PM2.5卡片 -->
        <div class="sensor-card">
          <div class="sensor-title">PM2.5指数</div>
          <div class="sensor-value">{{ sensorData.pm25 }} μg/m<sup>3</sup></div>
        </div>

        <!-- 二氧化碳卡片 -->
        <div class="sensor-card">
          <div class="sensor-title">二氧化碳浓度</div>
          <div class="sensor-value">{{ sensorData.co2 }} ppm</div>
        </div>
      </div>
    </div>

    <div class="advice-panel">
      <h3>环境建议</h3>
      <div class="advice-content">
        <ul>
          <li v-for="(advice, index) in environmentAdvice" :key="index">
            {{ advice }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 20px;
  border-radius: 10px;
  background-color: #f8f9fa;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.location-header {
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.location-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.environment-panel, .advice-panel {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.environment-panel h3, .advice-panel h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.sensor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.sensor-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.sensor-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.sensor-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.advice-content ul {
  padding-left: 20px;
  margin: 0;
}

.advice-content li {
  margin-bottom: 10px;
  color: #555;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sensor-grid {
    grid-template-columns: 1fr;
  }
}
</style>